<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="include/fore/header::html">
    <meta charset="UTF-8">
    <title>指尖上的魔术师</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="keywords" content="blog,learning,IT,code,sirius,java,machine learning,playing all kinds of balls">
    <meta name="description" content="从事编程，喜欢各种球类、户外运动。专注于java技术栈，熟悉redis、shiro、elastic search、webmagic、websocket等中间件
    ，热衷前沿人工智能技术的学习，虽然只是入个门(*^__^*) 嘻嘻……。">

    <link rel="icon" type="image/x-icon" href="img/icon.jpg">
    <link href="css/amazeui.min.css" rel="stylesheet">
    <link href="css/amaze.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/fore/index.css">
    <link rel="stylesheet" href="css/plugs_paging.css">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/amazeui.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>

    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp", sans-serif;
        }
    </style>
    <style>
        .top_bar_active {
            color: #3bb4f2 !important;
            background-color: transparent !important;
        }
    </style>
</head>
<body>
<div th:replace="include/fore/top::html">
    <div class="am-topbar" style="background-color: #303643; position: fixed; z-index:100; width:100%; border-color: transparent;">
        <h1 class="am-topbar-brand">
            <a href="#" style="color:#fff">指尖上的魔术师</a>
        </h1>
        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav" style="padding-left: 0px; padding-top: 2px;">
                <li v-if="item == 'home'"><a class="top_bar top_bar_a top_bar_active" href="/"><span class="am-icon-home"></span>&nbsp;首页</a></li>
                <li v-else><a class="top_bar top_bar_a" href="/categories"><span class=""></span>&nbsp;文件夹</a></li>
                <li v-else><a class="top_bar top_bar_a" href="/date"><span class=""></span>&nbsp;日期</a></li>
                <li v-else><a class="top_bar top_bar_a" href="/tags"><span class=""></span>&nbsp;标签墙</a></li>
                <!--<li><a class="top_bar top_bar_a" href="/update"><span class=""></span>&nbsp;更新</a></li>-->
                <li v-else><a class="top_bar top_bar_a" href="/friendlylink"><span class=""></span>&nbsp;友链</a></li>
            </ul>
        
            <div class="am-topbar-right" th:if="${null==session.user}" style="margin-top: 3px; float: right;">
                <a href="/register" class="am-btn am-btn-primary am-topbar-btn am-btn-sm" style="color: white">注册</a>
            </div>
            <div class="am-topbar-right" th:if="${null==session.user}" style="margin-top: 3px; float: right;">
                <a href="/login" class="loginBtn am-btn am-btn-primary am-topbar-btn am-btn-sm" style="color: white">登录</a>
            </div>
        </div>
    </div>
</div>
<div id="app">
    <!--页面主体-->
    <div id="main">
        <div class="am-g main-body">
            <div class="am-u-sm-12 am-u-lg-3 industry">
                <div id="left">
                    <!--我的卡片-->
                    <div class="myCard">
                        <div class="am-g">
                            <div class="img-title">
                                <img class="img" src="img/loading2.gif" data-src="img/icon.jpg">
                            </div>
                            <div class="img-words">
                                <h3 id="name">指尖上的魔术师</h3>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div id="connection" style="font-size: 14px">
                            <small style="font-size: 16px; color: #808080ad; display: block; margin-bottom: 10px;"><span class="am-icon-credit-card"></span> 魔术变咂了就不再是魔术，是小丑。</small>
                            <small style="font-size: 16px;color: #808080ad;"><span class="am-icon-wechat"></span> 微信公众号：指尖上的魔术师</small>
                            <div id="follow">
                                <button class="myCardBtn am-btn am-btn-secondary am-round attention_btn" data-am-offcanvas="{target: '#offCanvas'}">扫描二维码关注我</button>
                            </div>
                        </div>
                        <hr>
                        <div class="icons-row">
                            <div class="icons">
                                <div class="icon">
                                    <a href="https://github.com/SiriusShum" target="_blank" class="am-icon-github am-icon-md " title="GitHub"></a>
                                </div>
                                <div class="icon">
                                    <a href="https://gitee.com/sirius_swu_admin" target="_blank" title="码云"><img src="./img/fore/gitee.png" style="width: 30px;"></a></a>
                                </div>
                                <div class="icon">
                                    <a href="https://weibo.com/p/1005055376213818/home?from=page_100505&mod=TAB#place" target="_blank" class="am-icon-weibo am-icon-md" title="微博"></a>
                                </div>
                                <div class="icon">
                                    <a href="https://www.cnblogs.com/sirius-swu/" target="_blank" title="博客园"><img src="./img/fore/cnblogs.png" style="width: 30px"></a>
                                </div>
                                <div class="icon">
                                    <a href="https://my.oschina.net/u/3128043" target="_blank" title="开源中国"><img src="./img/fore/oschina.png" style="width: 30px"></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--搜索文章-->
                    <div class="new-comment">
                        <div class="am-list-news am-list-news-default">
                            <div class="am-list-news-hd am-cf" style="padding-bottom: 0px; border-bottom: 1px solid #ebebeb !important;">
                                <a class="newComments">
                                    <h2 style="border-bottom: 1px solid #2f2f2d; padding-bottom: 28px;">搜索文章</h2>
                                </a>
                            </div>
                            <div class="am-list-news-bd" style="padding-top: 20px;">
                                <div class="am-form-group am-form-icon">
                                    <a href="#nowhere" @click="search"><i class="am-icon-search"></i></a>
                                    <input type="text" class="am-form-field am-round" placeholder="请输入关键字"
                                           @keyup.enter="search" v-model.trim="keyword">
                                </div>
                            </div>

                        </div>
                    </div>

                    <!--评论最多的文章-->
                    <div class="new-comment">
                        <div class="am-list-news am-list-news-default">
                            <div class="am-list-news-hd am-cf" style="padding-bottom: 0px;">
                                <a class="newComments">
                                    <h2 style="border-bottom: 1px solid #2f2f2d; padding-bottom: 28px;">评论最多的文章</h2>
                                </a>
                            </div>
                            <div class="am-list-news-bd">
                                <ul class="am-list">
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <!--访问最多的文章-->
                    <div class="new-leaveWord">
                        <div class="am-list-news am-list-news-default" >
                            <div class="am-list-news-hd am-cf" style="padding-bottom: 0px;">
                                <a class="newLeaveWord">
                                    <h2 style="border-bottom: 1px solid #2f2f2d; padding-bottom: 28px;">访问最多的文章</h2>
                                </a>
                            </div>
                            <div class="am-list-news-bd">
                                <ul class="am-list">
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                    <li class="am-g am-list-item-dated index-left-li">
                                        <a class="newCommentTitle am-list-item-hd" style="padding-bottom: 5px">测试标题</a>
                                        <span class="am-list-date index-left-date">2019-07-21</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="tag-cloud">
                        <h3 class="widget-title">标签云</h3>
                        <div class="widget-tag-cloud" v-for="t in tags">
                            <a :href="'/article_of_tag?tid='+t.id" :id="forTagId(t.id)" :style="{'color':changeColor(t.articleCount)}">{{t.name}}</a>
                        </div>
                    </div>

                    <div class="site-info">
                        <h5 class="site-title">
                            <i class="am-icon-info site-icon"></i>
                            <strong style="margin-left: 15px">网站统计</strong>
                        </h5>
                        <ul class="site-default" style="height: 200px">
                            <li>
                                <i class="am-icon-file site-default-icon"></i><span class="site-default-word">文章总数</span>：{{articlesCount}} 篇
                            </li>
                            <li>
                                <i class="am-icon-comment-o site-default-icon"></i><span class="site-default-word">评论总数</span>：{{commentsCount}} 条
                            </li>
                            <li>
                                <i class="am-icon-eye site-default-icon"></i><span class="site-default-word">浏览总数</span>：{{visitCount}} 次
                            </li>
                            <li>
                                <i class="am-icon-user site-default-icon"></i><span class="site-default-word">访客总数</span>：{{visitorCount}} 个
                            </li>
                        </ul>
                    </div>

                </div>
            </div>

            <div class="showArticle am-u-sm-12 am-u-lg-6">
                <div class="articles">
                    <div>
                        <div class="center">
                            <div class="empty">
                                <header class="article-header">
                                    <h1 itemprop="name">
                                        <a class="article-title" target="_blank">为什么要前后端分离？有什么优缺点？</a>
                                    </h1>
                                    <div class="article-meta row">
                                        <span class="articleType am-badge am-badge-success">转载</span>
                                        <div class="articlePublishDate">
                                            <i class="am-icon-calendar" title="发布日期"><a class="linkColor"> 昨天 </a></i>
                                        </div>
                                        <div class="originalAuthor">
                                            <i class="am-icon-user" title="发布者"><a class="linkColor"> Java技术架构 </a></i>
                                            <i class="am-icon-folder" title="文件夹"><a class="linkColor"> 点点滴滴  </a></i>
                                            <i class="am-icon-eye" title="阅读数"> 5 </i>
                                            <!--<i class="am-icon-comment" title="评论数"><span :id="forCommentId(a.id)"> {{comment_count_map(a.id)}} </span></i>-->
                                            <i class="am-icon-comment" title="评论数"> 1 </i>
                                            <i class="am-icon-thumbs-up" title="点赞数"> 3 </i>
                                        </div>
                                    </div>
                                </header>
                                <div class="article-entry">
                                    <div>
                                        <div class="am-u-sm-9 am-u-md-9 am-u-lg-9" style="padding-left: 0px !important; padding-right: 0px !important; min-height: 81.6px;">
                                            一、前戏 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是... 
                                        </div>
                                        <div class="am-u-sm-3 am-u-md-3 am-u-lg-3" style="height: 125px;">
                                            <img src="./img/icon.jpg">
                                        </div>
                                    </div>
                                </div>
                                <div class="article-tags">
                                    <i class="am-icon-tag"><a class="tag"> java </a></i>
                                </div>
                                <hr>
                            </div>
                        </div>
                        <div class="center-app">
                            <div class="am-panel am-panel-default">
                                <div class="am-panel-bd">
                                    <div class="panel-img">
                                        <img src="./img/icon.jpg">
                                    </div>
                                    <div class="panel-detail">
                                        <div class="panel-detail-title">
                                            <p>为什么要前后端分离？有什么优缺点？</p>
                                        </div>
                                        <div class="panel-detail-body">
                                            <div class="pane-detail-body-icon">
                                                <div class="article-meta row">
                                                    <span class="articleType am-badge am-badge-success">转载</span>
                                                    <div class="articlePublishDate">
                                                        <i class="am-icon-calendar" title="发布日期"><a class="linkColor"> 昨天 </a></i>
                                                    </div>
                                                    <div class="originalAuthor">
                                                        <i class="am-icon-user" title="发布者"><a class="linkColor"> Java技术架构 </a></i>
                                                        <i class="am-icon-folder" title="文件夹"><a class="linkColor"> 点点滴滴  </a></i>
                                                        <i class="am-icon-eye" title="阅读数"> 5 </i>
                                                        <!--<i class="am-icon-comment" title="评论数"><span :id="forCommentId(a.id)"> {{comment_count_map(a.id)}} </span></i>-->
                                                        <i class="am-icon-comment" title="评论数"> 1 </i>
                                                        <i class="am-icon-thumbs-up" title="点赞数"> 3 </i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-panel am-panel-default">
                                    <div class="am-panel-bd">
                                        <div class="panel-img">
                                            <img src="./img/icon.jpg">
                                        </div>
                                        <div class="panel-detail">
                                            <div class="panel-detail-title">
                                                <p>为什么要前后端分离？有什么优缺点？</p>
                                            </div>
                                            <div class="panel-detail-body">
                                                <div class="pane-detail-body-icon">
                                                    <div class="article-meta row">
                                                        <span class="articleType am-badge am-badge-success">转载</span>
                                                        <div class="articlePublishDate">
                                                            <i class="am-icon-calendar" title="发布日期"><a class="linkColor"> 昨天 </a></i>
                                                        </div>
                                                        <div class="originalAuthor">
                                                            <i class="am-icon-user" title="发布者"><a class="linkColor"> Java技术架构 </a></i>
                                                            <i class="am-icon-folder" title="文件夹"><a class="linkColor"> 点点滴滴  </a></i>
                                                            <i class="am-icon-eye" title="阅读数"> 5 </i>
                                                            <!--<i class="am-icon-comment" title="评论数"><span :id="forCommentId(a.id)"> {{comment_count_map(a.id)}} </span></i>-->
                                                            <i class="am-icon-comment" title="评论数"> 1 </i>
                                                            <i class="am-icon-thumbs-up" title="点赞数"> 3 </i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div v-else class="less-than-zero">
                        <img src="./img/null.png">
                        <p>空空如也</p>
                    </div>
                </div>
                <div v-if="articles.length>0"><div th:replace="include/page::html"></div></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <!--引入共有底部-->
    <div th:fragment="footer">
        <div class="footer">
            <div class="footer am-u-sm-centered" style="height: 42.5px; background-color: #222222;">
                <div class="am-vertical-align" style="text-align: center;">
                    <div class="am-vertical-align-bottom">
                        <div style="color: #009688;font-size: 15px; line-height: 42.5px;">
                            &copy; 2018-2019 指尖上的魔术师
                        </div>
                    </div>
                </div>
            </div>
            <!--<div id="sidebar_toggle" data-am-offcanvas="{target: '#offCanvas'}">-->
                <!--<div class="sidebar_toggle_line_wrap">-->
                    <!--<span class="sidebar-toggle-line sidebar-toggle-line-first" style="width: 100%; top: 0; transform: rotateZ(0deg); opacity: 1; left:0"></span>-->
                    <!--<span class="sidebar-toggle-line sidebar-toggle-line-middle" style="width: 100%; opacity: 1; left: 0; top: 0; transform: rotateZ(0deg);"></span>-->
                    <!--<span class="sidebar-toggle-line sidebar-toggle-line-last" style="width: 100%; top: 0; transform: rotateZ(0deg); opacity: 1; left: 0;"></span>-->
                <!--</div>-->
            <!--</div>-->
            <div id="offCanvas" class="am-offcanvas">
                <div class="am-offcanvas-bar am-offcanvas-bar-flip">
                    <div class="am-offcanvas-content">
                        <div class="sidebar-inner">
                            <div class="site-overview">
                                <div class="img-author" style="text-align: center">
                                    <p style="font-size: large;font-family: 仿宋">微信公众号</p>
                                    <div id="weixin">
                                        <img class="weixinPublic" src="/img/wechat _official_account.jpg">
                                    </div>
                                    <div class="author-name">
                                        指尖上的魔术师
                                    </div>
                                    <div class="author-words">
                                        <p>从事编程，喜欢各种球类、户外运动。专注于java技术栈，熟悉redis、shiro、elastic search、webmagic、websocket等中间件
                                            ，热衷前沿人工智能技术的学习，虽然只是入个门(*^__^*) 嘻嘻……。</p>
                                    </div>

                                </div>
                                <div class="site-state" style="opacity: 1; display: block; transform: translateX(0px);">
                                    <div class="site-state-item learn-posts">
                                        <a href="/archives">
                                            <span class="archivesNum site-state-item-count"></span>
                                            <span class="site-state-item-name">日志</span>
                                        </a>
                                    </div>
                                    <div class="site-state-item learn-categories">
                                        <a id="site-state-item-a" href="/categories">
                                            <span class="categoriesNum site-state-item-count"></span>
                                            <span class="site-state-item-name">分类</span>
                                        </a>
                                    </div>
                                    <div class="site-state-item learn-tags">
                                        <a href="/tags">
                                            <span class="tagsNum site-state-item-count"></span>
                                            <span class="site-state-item-name">标签</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="back-to-top" style="bottom: 60px; right: 40px; width: 50px; position: fixed; display: none;">
                <a href="#top" title="回到顶部">
                    <img src="img/top.png" style="width: 50px; max-width: 50px;"/>
                </a>
            </div>
        </div>
    </div>
</div>

<script src="js/fore/index.js"></script>
<script src="js/all.js"></script>
<script src="js/scroll.js"></script>
<script>
    var data4Vue = {
        item: 'home'
    };
    //ViewModel
    var vue = new Vue({
        el: '#top',
        data: data4Vue,
        mounted:function(){ //mounted　表示这个 Vue 对象加载成功了

        },
        methods: {

        }
    });
</script>
</body>
</html>